<template>
  <div>
      <h1 style="margin-top:60px;font-size: 18px;">mint的所有点击事件基本都是使用@click.native</h1>
      <div>
          <h1>成功失败提示框——推荐使用weui,因为样式更好看</h1>
          <mt-button @click="toast">toast</mt-button>
      </div>
      <div>
          <h1>等待框-请求网络</h1>
          <mt-button @click="loading111">loading111</mt-button>
      </div>
      <div>
          <h1>确认框</h1>
          <mt-button @click="confirmDelete">确定删除吗</mt-button>
      </div>
      <div>
          <h1>操作表actionSheet：推荐使用weuiJS，因为它只要调用方法就可以</h1>
          <mt-button @click="sheetVisible=!sheetVisible">actionSheet</mt-button>
          <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
      </div>
      <div>
          <h1>底部弹框——用于实现自定义的复杂的操作表</h1>
          <mt-button @click="popupVisible=!popupVisible">popup</mt-button>
          <mt-popup v-model="popupVisible" position="bottom" pop-transition="popup-fade">
              <div class="popupStyle">
                  <p><i class="iconfont icon-sousuo"></i> 搜索</p>
                  <p>上传</p>
                  <p>转发</p>
                  <p>评价</p>
              </div>
          </mt-popup>
      </div>
      <div>
          <h1>轮播图</h1>
          <mt-swipe :auto="3000" :speed="300">
              <mt-swipe-item v-for="item in imgs" :key="item"><img :src="item" class="swipeImg"></mt-swipe-item>
          </mt-swipe>
      </div>
      <div>
          <h1>图片懒加载：v-lazy代替 :src</h1>
          <ul>
              <li v-for="item in imgs">
                  <img class="swipeImg" v-lazy="item">
              </li>
          </ul>
      </div>
      <div>
          <h1>滑块</h1>
          <mt-range v-model="rangeValue" :min="10" :max="90" :step="10" :bar-height="5" @change="changeValue">
              <div slot="start">0</div>
              <div slot="end">100</div>
          </mt-range>
      </div>
      <div>
          <h1>进度条</h1>
          <mt-progress v-model="changeProgressVal">
              <div slot="end">{{changeProgressVal}}%</div>
          </mt-progress>
      </div>
      <div>
          <h1>picker</h1>
          <p>民族——推荐使用功能weuiJS，不用处理样式问题，并且直接调用方法就可以</p>
          <mt-button type="primary" @click="isShowNotionalityList=!isShowNotionalityList">选择民族</mt-button>
          <mt-picker :slots="nationalitySlot" @change="onNationalityChange" :visible-item-count="3" v-if="isShowNotionalityList"></mt-picker>
          <p>出生年份: {{ nationality }}</p>
          <br>
          <p>地点——推荐使用功能weuiJS，不用处理样式问题,并且直接调用方法就可以</p>
          <mt-picker :slots="addressSlots" @change="onAddressChange" :visible-item-count="5"></mt-picker>
          <p class="page-picker-desc">地址: {{ addressProvince }} {{ addressCity }}</p>
          <p>时间</p>
          <mt-button @click.native="open">时间选择器(系统自带，直接用就好)</mt-button>
          <mt-datetime-picker v-model="value4" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm" ref="picker4"></mt-datetime-picker>
          <p>选中的时间为：{{standardTime}}</p><br>
      </div>
      <div>
          <h1>索引列表</h1>
          <mt-index-list>
              <mt-index-section v-for="item in alphabet" :index="item.initial">
                  <mt-cell v-for="cell in item.cells" :title="cell"></mt-cell>
              </mt-index-section>
          </mt-index-list>
      </div>
      <div>
          <h1>头部</h1>
          <mt-header title="标题过长会隐藏后面的内容啊哈哈哈哈">
              <router-link to="/" slot="left">
                  <mt-button icon="back">返回</mt-button>
              </router-link>
              <mt-button slot="right"><i class="iconfont icon-gengduo-"></i></mt-button>
          </mt-header>
      </div>
      <div>
          <h1>选项卡</h1>
          <mt-tabbar v-model="selected" fixed>
              <mt-tab-item id="外卖" @click.native="clickTab">
                  <img slot="icon" src=".././assets/logo.png">
                  外卖
              </mt-tab-item>
              <mt-tab-item id="订单" @click.native="clickTab">
                  <img slot="icon" src=".././assets/logo.png">
                  订单
              </mt-tab-item>
              <mt-tab-item id="发现" @click.native="clickTab">
                  <img slot="icon" src=".././assets/logo.png">
                  发现
              </mt-tab-item>
              <mt-tab-item id="我的" @click.native="clickTab">
                  <img slot="icon" src=".././assets/logo.png">
                  我的
              </mt-tab-item>
          </mt-tabbar>
      </div>
      <div>
          <h1>导航条：通常配合tab-container使用：通过id获取服务器的数据，然后用tab-container呈现给页面</h1>
          <mt-navbar v-model="selectItem" fixed>
              <mt-tab-item id="1" @click.native="clickTabItem">选项一</mt-tab-item>
              <mt-tab-item id="2" @click.native="clickTabItem">选项二</mt-tab-item>
              <mt-tab-item id="3" @click.native="clickTabItem">选项三</mt-tab-item>
          </mt-navbar>
      </div>
      <div>
          <h1>按钮</h1>
          <mt-button type="danger" plain disabled size="large">clickMe</mt-button>
          <mt-button icon="back">back</mt-button>
          <mt-button icon="more">更多</mt-button>
          <!--带iconfont-->
          <mt-button><i class="iconfont icon-fanhui"></i>返回</mt-button>
          <mt-button>搜索 <i class="iconfont icon-sousuo"></i></mt-button>
          <mt-button><i class="iconfont icon-sousuo"></i></mt-button>
          <mt-button>
              <img src=".././assets/logo.png" height="20" width="20" slot="icon">
              带自定义图标
          </mt-button>
      </div>
      <div>
          <h1>单元格cell(推荐):可以用来做列表渲染：title,icon插槽都在左边，value或内容在右侧 to和this.$router.go(-1)结合用</h1>
          <mt-cell title="姓名" value="张三"></mt-cell>
          <mt-cell>
              <span slot="title">出生地</span>
              <span slot="icon"><i class="iconfont icon-sousuo"></i></span>
              <mt-button><i class="iconfont icon-sousuo"></i>你猜</mt-button>
          </mt-cell>
          <mt-cell title="年龄">
              <span style="color: green">10</span>
          </mt-cell>
          <mt-cell title="生日" value="1994/12/1" is-link to="/"></mt-cell>
      </div>
      <!--<div>-->
          <!--<h1>带滑动按钮的单元格（特殊地方）：用法同单元格，特殊场景常用：如qq聊天</h1>-->
          <!--<mt-cell-swipe title="姓名" value="李四" :right="[{content: 'Delete',style: { background: 'red', color: '#fff' },handler: () => this.$mt.MessageBox('delete')}]"></mt-cell-swipe>-->
      <!--</div>-->
      <div>
          <h1>加载动画，可指定显示类型、尺寸和颜色</h1>
          <mt-spinner type="snake"></mt-spinner>
          <mt-spinner type="double-bounce"></mt-spinner>
          <mt-spinner type="triple-bounce"></mt-spinner>
          <mt-spinner type="fading-circle"></mt-spinner>
          <mt-spinner :type="0"></mt-spinner>
          <mt-spinner :type="1"></mt-spinner>
          <mt-spinner :type="2"></mt-spinner>
          <mt-spinner :type="3"></mt-spinner>
          <mt-spinner color="#26a2ff"></mt-spinner>
          <mt-spinner color="rgb(100, 100, 100)"></mt-spinner>
          <mt-spinner color="yellow"></mt-spinner>
          <mt-spinner :size="60"></mt-spinner>
      </div>
      <div>
          <h1>面板：（1）简单的面板可以这么做：tabContainer: v-model的active的值和id是对应的，因此只要让active的值和id的属性值对应就可以实现跳转；（2）面板可以配合选项卡，配合导航条做出很多的跳转动效，通过选项卡或者导航条的id值，获取到服务端的数据，然后通过面板展现出来</h1>
          <div>
              <mt-button size="small" @click.native.prevent="active = 'tab-container1'">tab 1</mt-button>
              <mt-button size="small" @click.native.prevent="active = 'tab-container2'">tab 2</mt-button>
              <mt-button size="small" @click.native.prevent="active = 'tab-container3'">tab 3</mt-button>
          </div>
          <div>
              <!--循环体可能是mt-tab-container（方式二：服务器数据，复杂布局）；也可以是mt-cell（方式一：直接数据，简单布局）-->
              <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
                  <mt-tab-container-item id="tab-container1">
                      <!--循环具体项-->
                      <mt-cell v-for="n in 10" title="tab-container 1" :value="n"></mt-cell>
                  </mt-tab-container-item>
                  <mt-tab-container-item id="tab-container2">
                      <mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
                  </mt-tab-container-item>
                  <mt-tab-container-item id="tab-container3">
                      <mt-cell v-for="n in 7" title="tab-container 3"></mt-cell>
                  </mt-tab-container-item>
              </mt-tab-container>
          </div>
      </div>
      <div>
          <h1>switch开关</h1>
          <mt-switch v-model="switchVal" @change="changeSwitchVal">开关</mt-switch>
      </div>
      <div>
          <h1>复选框按钮，依赖cell组件：显示的是label，实际选中的是value的值组成的数组</h1>
          <!--title:复选框上方标题；options：左侧标签-->
          <mt-checklist align="right" title="右对齐复选框" v-model="checkListVal" :options="List" @change="changeCheckLisItem"></mt-checklist>
          <!--常规用法-->
          <mt-checklist title="复选框列表" @change="changeItem" v-model="chkVal" :options="optionList"></mt-checklist>
      </div>
      <div>
          <h1>单选框：显示的是label，实际选中的是value的值；title是标题，options显示左侧的label标签，v-model为value</h1>
          <!--常规用法-->
          <mt-radio title="单选框列表" @change="changeRadio" v-model="radVal" :options="RadioList"></mt-radio>
      </div>
      <div>
          <h1>徽章</h1>
          <mt-cell title="徽章">
              <span>没读的消息&nbsp;</span>
              <mt-badge type="warning">10</mt-badge>
          </mt-cell>
      </div>
      <div>
          <h1>输入框:校验状态:state="state"，只要正则一成功就改变状态为success</h1>
          <mt-field label="用户名" placeholder="请输入用户名" type="text" v-model="username"></mt-field>
          <mt-field label="密码" placeholder="请输入密码" type="password" v-model="upwd"></mt-field>
          <mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="email"></mt-field>
      </div>








      <div>
          <h1>加载更多——上拉加载，下拉刷新</h1>
          <mt-loadmore :top-method="refresh" ref="loadmore" :bottom-method="loadMore">
              <ul>
                  <li v-for="item in list" :key="item.uid">{{ item.username}}</li>
              </ul>
              <p v-if="isFinish && list.length">没有更多数据可以加载了</p>
              <!--下拉刷新自定义图标-->
              <div slot="top" class="mint-loadmore-top">
                  <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop' }">↓</span>
                  <span v-show="topStatus === 'loading'">
                    <mt-spinner type="snake"></mt-spinner>
                  </span>
              </div>
              <!--上拉加载-->
              <div slot="bottom" class="mint-loadmore-bottom">
                  <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
                  <span v-show="bottomStatus === 'loading'">
                    <mt-spinner type="snake"></mt-spinner>
                  </span>
              </div>
          </mt-loadmore>
      </div>
  </div>
</template>

<script>
    //picker-地址（一般用weui的picker取代了）
    const address = {
        '北京': ['北京'],
        '广东': ['广州', '深圳', '珠海', '汕头', '韶关', '佛山', '江门', '湛江', '茂名', '肇庆', '惠州', '梅州', '汕尾', '河源', '阳江', '清远', '东莞', '中山', '潮州', '揭阳', '云浮'],
        '上海': ['上海'],
        '天津': ['天津'],
        '重庆': ['重庆'],
        '辽宁': ['沈阳', '大连', '鞍山', '抚顺', '本溪', '丹东', '锦州', '营口', '阜新', '辽阳', '盘锦', '铁岭', '朝阳', '葫芦岛'],
        '江苏': ['南京', '苏州', '无锡', '常州', '镇江', '南通', '泰州', '扬州', '盐城', '连云港', '徐州', '淮安', '宿迁'],
        '湖北': ['武汉', '黄石', '十堰', '荆州', '宜昌', '襄樊', '鄂州', '荆门', '孝感', '黄冈', '咸宁', '随州', '恩施土家族苗族自治州', '仙桃', '天门', '潜江', '神农架林区'],
        '四川': ['成都', '自贡', '攀枝花', '泸州', '德阳', '绵阳', '广元', '遂宁', '内江', '乐山', '南充', '眉山', '宜宾', '广安', '达州', '雅安', '巴中', '资阳', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州'],
        '陕西': ['西安', '铜川', '宝鸡', '咸阳', '渭南', '延安', '汉中', '榆林', '安康', '商洛'],
        '河北': ['石家庄', '唐山', '秦皇岛', '邯郸', '邢台', '保定', '张家口', '承德', '沧州', '廊坊', '衡水'],
        '山西': ['太原', '大同', '阳泉', '长治', '晋城', '朔州', '晋中', '运城', '忻州', '临汾', '吕梁'],
        '河南': ['郑州', '开封', '洛阳', '平顶山', '安阳', '鹤壁', '新乡', '焦作', '濮阳', '许昌', '漯河', '三门峡', '南阳', '商丘', '信阳', '周口', '驻马店'],
        '吉林': ['长春', '吉林', '四平', '辽源', '通化', '白山', '松原', '白城', '延边朝鲜族自治州'],
        '黑龙江': ['哈尔滨', '齐齐哈尔', '鹤岗', '双鸭山', '鸡西', '大庆', '伊春', '牡丹江', '佳木斯', '七台河', '黑河', '绥化', '大兴安岭地区'],
        '内蒙古': ['呼和浩特', '包头', '乌海', '赤峰', '通辽', '鄂尔多斯', '呼伦贝尔', '巴彦淖尔', '乌兰察布', '锡林郭勒盟', '兴安盟', '阿拉善盟'],
        '山东': ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照', '莱芜', '临沂', '德州', '聊城', '滨州', '菏泽'],
        '安徽': ['合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '滁州', '阜阳', '宿州', '巢湖', '六安', '亳州', '池州', '宣城'],
        '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
        '福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
        '湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州'],
        '广西': ['南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '玉林', '百色', '贺州', '河池', '来宾', '崇左'],
        '江西': ['南昌', '景德镇', '萍乡', '九江', '新余', '鹰潭', '赣州', '吉安', '宜春', '抚州', '上饶'],
        '贵州': ['贵阳', '六盘水', '遵义', '安顺', '铜仁地区', '毕节地区', '黔西南布依族苗族自治州', '黔东南苗族侗族自治州', '黔南布依族苗族自治州'],
        '云南': ['昆明', '曲靖', '玉溪', '保山', '昭通', '丽江', '普洱', '临沧', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州', '大理白族自治州', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州'],
        '西藏': ['拉萨', '那曲地区', '昌都地区', '林芝地区', '山南地区', '日喀则地区', '阿里地区'],
        '海南': ['海口', '三亚', '五指山', '琼海', '儋州', '文昌', '万宁', '东方', '澄迈县', '定安县', '屯昌县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县'],
        '甘肃': ['兰州', '嘉峪关', '金昌', '白银', '天水', '武威', '酒泉', '张掖', '庆阳', '平凉', '定西', '陇南', '临夏回族自治州', '甘南藏族自治州'],
        '宁夏': ['银川', '石嘴山', '吴忠', '固原', '中卫'],
        '青海': ['西宁', '海东地区', '海北藏族自治州', '海南藏族自治州', '黄南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'],
        '新疆': ['乌鲁木齐', '克拉玛依', '吐鲁番地区', '哈密地区', '和田地区', '阿克苏地区', '喀什地区', '克孜勒苏柯尔克孜自治州', '巴音郭楞蒙古自治州', '昌吉回族自治州', '博尔塔拉蒙古自治州', '石河子', '阿拉尔', '图木舒克', '五家渠', '伊犁哈萨克自治州'],
        '香港': ['香港'],
        '澳门': ['澳门'],
        '台湾': ['台北市', '高雄市', '台北县', '桃园县', '新竹县', '苗栗县', '台中县', '彰化县', '南投县', '云林县', '嘉义县', '台南县', '高雄县', '屏东县', '宜兰县', '花莲县', '台东县', '澎湖县', '基隆市', '新竹市', '台中市', '嘉义市', '台南市']
    };
    //索引列表
    const NAMES = ['Aaron', 'Alden', 'Austin', 'Baldwin', 'Braden', 'Carl', 'Chandler', 'Clyde', 'David', 'Edgar', 'Elton', 'Floyd', 'Freeman', 'Gavin', 'Hector', 'Henry', 'Ian', 'Jason', 'Joshua', 'Kane', 'Lambert', 'Matthew', 'Morgan', 'Neville', 'Oliver', 'Oscar', 'Perry', 'Quinn', 'Ramsey', 'Scott', 'Seth', 'Spencer', 'Timothy', 'Todd', 'Trevor', 'Udolf', 'Victor', 'Vincent', 'Walton', 'Willis', 'Xavier', 'Yvonne', 'Zack', 'Zane'];

    export default {
    name:'mint',
    data(){
        return{
//            下拉刷新功能----------------------------------
            list:[{
                uid:1,
                username:"zhang"
            },{
                uid:2,
                username:'song'
            },{
                uid:3,
                username:'qi'
            },{
                uid:4,
                username:'li'
            },{
                uid:5,
                username:'wang'
            },{
                uid:6,
                username:'huang'
            }],
//            图标相关的
            topStatus:'',
            bottomStatus:'',
            //六剑客,后面的list需要用noticeList代替
//            currentPage: 1,
//            recordPage: 1,
//            pageSize: 12,
//            noticeList: [],
            isFinish: false,
//            loadingStatus: 'refresh'
//          ---------------------------------------
            //操作表
            sheetVisible:false, //控制操作表的显示和隐藏
            actions:[{
                name:'拍照',
                method:'paizhao'
            },{
                name:'相册',
                method:'xiangce'
            },{
                name:'转发',
                method:'zhuanfa'
            }],
            //底部弹框
            popupVisible:false,
            //轮播图
            imgs:[require('.././assets/images/timg01.jpg'),require('.././assets/images/timg02.jpg'),require('.././assets/images/timg03.jpg'),require('.././assets/images/timg04.jpg')],
            //滑块
            rangeValue: 30,
            //进度条
            changeProgressVal:40,
            //picker-民族
            isShowNotionalityList:false,
            nationalitySlot: [{
                flex: 1,
                values: ['汉族', '回族', '畲族', '藏族', '蒙古族', '维吾尔族', '壮族', '朝鲜族'],
                className: 'slot1'
            }],
            nationality: '汉族',
            //picker-地址
            addressSlots: [
                {
                    flex: 1,
                    values: Object.keys(address),//Object.keys用于抽取对象的key，然后组成索引数组，注意：对应 slot 的备选值数组。若为对象数组，则需在 mt-picker 标签上设置 value-key 属性来指定显示的字段名
                    className: 'slot1',
                    textAlign: 'center'
                }, {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                }, {
                    flex: 1,
                    values: ['北京'],
                    className: 'slot3',
                    textAlign: 'center'
                }
            ],
            addressProvince: '北京',
            addressCity: '北京',
            //picker-时间
            value4:'',
            standardTime:'',
            //索引列表
            alphabet:[],
            //选项卡
            selected:"外卖",
            //导航条
            selectItem:1,
            //面板tabContainer
            active:'',
            //开关
            switchVal:false,
            //复选框
            checkListVal:['选项一','选项二'],
            List:['选项一','选项二','选项三','选项四','选项五'],
            //复选框常规用法
            chkVal:['值F','值A'], //复选框是数组
            optionList:[
                {
                    label: '被禁用',
                    value: '值F',
                    disabled: true
                },
                {
                    label: '选中禁用',
                    value: '选中禁用的值',
                    disabled: true
                },
                {
                    label: '选项A',
                    value: '值A'
                },
                {
                    label: '选项B',
                    value: '值B'
                }
            ],
            //单选框常用
            radVal:'male', //单选框是字符串
            RadioList:[
                {
                    label: '男',
                    value: 'male'
                },
                {
                    label: '女',
                    value: 'female'
                }
            ],
//            输入框
            username:'',
            upwd:'',
            email:'',
        }
    },
    created(){
////      初始化下拉刷新的数据  this.refresh()
        let timer=setInterval(()=>{
            this.changeProgressVal+=10;
            if(this.changeProgressVal>=100){
                console.log('下载成功');
                this.$mt.Toast({
                    message:'下载成功',
                    iconClass:'mintui mintui-success'
                });
                clearTimeout(timer)
            }
        },1000);
//        索引列表
        'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach(initial => {
            //NAMES：索引数组
            let cells = NAMES.filter(name => name[0] === initial);//判断右侧的值和左侧的第一个值是不是一样的，是一样的就保留下该字母下的所有条目显示在页面的顶部
            this.alphabet.push({initial, cells});
        });
    },
    methods:{
        toast(){
            this.$toast({
                message:"注册成功",
                iconClass:'mintui mintui-success',
                position:'middle'
            })
        },
        //等待框
        loading111(){
            this.$indicator.open({text:'加载中…',spinnerType:'fading-circle'})
            //网络请求拿到数据后，立即this.$indicator.close()
        },
//      上拉刷新，下拉加载功能————————————————————————————
        refresh() {
            // 下拉刷新
            this.$refs.loadmore.onTopLoaded();
//            this.currentPage=1;
//            this.loadingStatus='refresh';
//            this.loadNoticeList()
        },
        loadMore(){
            //上拉加载
            this.$refs.loadmore.onBottomLoaded();
//            if (this.data.isFinish) {
//                return
//            }
//            this.loadingStatus='loadMore';
//            this.loadNoticeList()
        },
        //获取服务器端数据
//        loadNoticeList() {
//            this.$mt.Indicator.open({text: '加载中', spinnerType: 'fading-circle'});
//            let params = {
//                pageNo: this.data.currentPage,
//                pageSize: this.data.pageSize
//            };
//            this.$axios.get('url', {params: params}).then((response) => {
//                this.$mt.Indicator.close();
//                if (response.head.code == app.constant.network_result_success) {
//                    if (response.data.noticeList.length >= context.data.pageSize) {
//                        // 有更多数据，可以加载更多
//                        this.isFinish = false
//                    } else {
//                        // 显示已加载全部
//                        this.isFinish = true
//                    }
//                    if (this.loadingStatus == 'refresh') {
//                        this.noticeList = response.data.noticeList
//                    }
//                    if (this.loadingStatus == 'loadMore') {
//                        this.noticeList = this.noticeList.concat(response.data.noticeList)
//                    }
//                    //公共执行部分
//                    this.recordPage = this.currentPage;
//                    //可能有问题
//                    this.currentPage = this.currentPage++
//
//                } else {
//                    this.$mt.Toast(response.head.message)
//                }
//            }).catch(function (error) {
//                this.currentPage = this.recordPage;
//                this.$mt.Indicator.close();
//                console.log('数据请求失败！')
//            })
//        }，
//       以上是上拉加载，下拉刷新部分———————————————————————————————————
        //确认框
        confirmDelete(){
            this.$messagebox.confirm('确定要删除你选购的商品吗？').then(res=>{
                console.log(res);
            }).catch(err=>{
                console.log(err)
            })
        },
//        滑块：值为v-model的值
        changeValue(e){
            console.log(e);
        },
//        picker-民族--推荐weui
        onNationalityChange(picker, values) {
            //选中的是values数组中的一个
            this.nationality = values[0];
        },
//       picker-地址--推荐weui
        onAddressChange(picker, values) {
            //picker为实例对象，values为选中的value的路径组成的数组
            picker.setSlotValues(1, address[values[0]]); //设置第2个带有values属性的slot的键值对,得到value[1]
            this.addressProvince = values[0];
            this.addressCity = values[1];
        },
//        picker-时间
        open(){
            this.$refs.picker4.open();
        },
        handleConfirm(val){
            //v-model的值为选中的值
            let date=new Date(val);
            let [y,m,d]=[date.getFullYear(),date.getMonth()+1,date.getDate()];
            let standardTime=y+'年'+m+'月'+d+'日';
            console.log(standardTime);
            this.standardTime=standardTime
        },
//        选项卡
        clickTab(){
            //选中的值为v-model的值，也就是item的id属性的值
            console.log(this.selected);
        },
        //导航条
        clickTabItem(){
            //选中的值为item的id的属性值
            console.log(this.selectItem);
        },
        //switch开关
        changeSwitchVal(){
            console.log(this.switchVal)//true or false
        },
        //复选框
        changeCheckLisItem(){
            console.log(this.checkListVal);
        },
        //常规用法
        changeItem(){
            console.log(this.chkVal);
        },
        //单选框常规用法
        changeRadio(){
          console.log(this.radVal)
        },
        //输入框


    },
}
</script>
<style scoped lang="less">
    .popupStyle{
        width:414px;
        text-align: center;
    }
    .popupStyle>p{
        line-height:2em;
        font-size: 18px;
        border-bottom:1px solid #ccc;
    }
    .mint-swipe {
        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
    }
    .swipeImg{
         width:100%;
     }
</style>
